<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>game 1</title>
    <style type="text/css">
        canvas {
            border: 1px black solid;
        }
    </style>
</head>
<body>
<canvas id="id-canvas" width="400" height="300"></canvas>
<script type="text/javascript">
    var log = console.log.bind(console)


    var imageFromPath = function(path){
        var img = new Image()
        img.src = path
        return img
    }


    var Ball = function () {
        var image = imageFromPath('ball.png')
        var o = {
            image: image,
            x: 100,
            y: 200,
            speedX: 10,
            speedY: 10,
            fired: false,
        }
        o.fire = function(){
            o.fired = true
        }
        o.move = function(){
            if (o.fired) {
                if (o.x < 0 || o.x > 400) {
                    o.speedX = -o.speedX
                }
                if (o.y < 0 || o.y > 300) {
                    o.speedY = -o.speedY
                }
                o.x += o.speedX
                o.y += o.speedY
            }
        }
        return o
    }


    var Paddle = function () {
        var image = imageFromPath('paddle.png')
        var o = {
            image: image,
            x: 100,
            y: 200,
            speed: 5,
        }
        o.moveLeft = function(){
            o.x -= o.speed
        }
        o.moveRight = function(){
            o.x += o.speed
        }
        o.collide = function(guaImage){
            if (guaImage.y + guaImage.image.height > o.y) {
                if (guaImage.x > o.x && guaImage.x < o.x + o.image.width) {
                    return true
                }
            }
            return false
        }
        return o
    }


    var GuaGame = function(){
        var g = {
            actions: {},
            keydowns: {},
        }
        g.canvas = document.querySelector('#id-canvas')
        g.context = g.canvas.getContext('2d')

        g.drawImage = function (guaImage) {
            g.context.drawImage(guaImage.image, guaImage.x, guaImage.y)
        }

        //events
        window.addEventListener('keydown', function (event) {
            g.keydowns[event.key] = true
        })
        window.addEventListener('keyup', function (event) {
            g.keydowns[event.key] = false
        })

        g.registerAction = function(key, callback){
            g.actions[key] = callback
        }

        //timer
        setInterval(function () {
            //Object.keys 返回一个对象所有属性组成的数组
            var keys = Object.keys(g.actions)
            for (var i = 0; i < keys.length; i++) {
                var key = keys[i]
                if (g.keydowns[key]) {
                    g.actions[key]()
                }
            }
            //update
            g.update()
            //clear
            g.context.clearRect(0, 0, g.canvas.width, g.canvas.height)
            //draw
            g.draw()
        }, 1000/30)

        return g
    }


    var __main = function () {
        var game = GuaGame()

        var paddle = Paddle()
        var ball = Ball()

        game.registerAction('a', function () {
            paddle.moveLeft()
        })
        game.registerAction('d', function () {
            paddle.moveRight()
        })
        game.registerAction('f', function () {
            ball.fire()
        })

        // game:{
        //     canvas:canvas#id-canvas
        //     context:CanvasRenderingContext2D
        //     draw:ƒ ()
        //     keydowns:{}
        //     registerAction:ƒ (key, callback)
        //     actions:a:ƒ (),d:ƒ ()
        // }
        //
        game.update = function(){
            ball.move()
            if (paddle.collide(ball)) {
                ball.speedY *= -1
            }
        }

        game.draw = function(){
            game.drawImage(paddle)
            game.drawImage(ball)
        }

    }

    __main()
</script>
</body>
</html>